<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/laoding.css" />
		<style type="text/css">
			.aui-list-item.wechat-top {
				background-color: #f3f3f7;
			}
			.aui-list .wechat-avatar {
				width: 2.5rem;
			}
			.wechat-avatar .aui-row-padded {
				background-color: #dddee0;
				padding: 0.1rem;
				border-radius: 0.2rem;
				margin-left: -0.05rem;
				margin-right: -0.05rem;
			}
			.wechat-avatar, .wechat-avatar > img {
				border-radius: 0.4rem;
			}
			.aui-list {
				border-top: none;
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list {
					border: none;
					background-size: 100% 0px;
				}
			}
			.menus {
				padding-left: 1rem;
				padding-right: 1rem;
				background: #FFFFFF;
				margin-bottom: 0.5rem;
			}
			.aui-tab-item {
				color: #555;
				font-size: 0.8rem;
			}
			.groups {
				display: none;
			}
		</style>
	</head>
	<body >
		<!-- <div id="app"> -->
		<div class="menus">
			<div class="aui-tab" id="tab">
				<div class="aui-tab-item aui-active">
					好 友
				</div>
				<div class="aui-tab-item">
					家  族
				</div>
				<!-- <div class="aui-tab-item">
					讨论组
				</div>
				<div class="aui-tab-item">
					聊天室 -->
				</div>
			</div>
		<!-- </div> -->
		<div id="app">
		<div class="aui-content aui-margin-b-15 friends">
			<div class="aui-searchbar" id="search">
				<div class="aui-searchbar-input aui-border-radius">
					<i class="aui-iconfont aui-icon-search"></i>
					<input type="number" placeholder="请输入会员昵称" id="nickname">
				</div>
			</div>
			<ul class="aui-list aui-media-list">
				<li class="aui-list-item aui-list-item-middle"  v-myclick="[member, startchatone]" v-for="(member, index) in memberlists">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media wechat-avatar">
							<img v-image-resize="{src:member.portrait?member.portrait:'../res/tx00.jpg'}" />
						</div>
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">
									{{member.nickname}}
								</div>
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle"  v-myclick="[member, startchatone]" v-for="(member, index) in memberlists">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media wechat-avatar">
							<img v-image-resize="{src:member.portrait?member.portrait:'../res/tx00.jpg'}" />
						</div>
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">
									{{member.nickname}}
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="aui-content aui-margin-b-15 groups">
			<div class="aui-searchbar" id="search">
				<div class="aui-searchbar-input aui-border-radius">
					<i class="aui-iconfont aui-icon-search"></i>
					<input type="number" placeholder="请输入家族名称" id="nickname">
				</div>
			</div>
			<ul class="aui-list aui-media-list" >
				<li class="aui-list-item aui-list-item-middle" tapmode v-myclick="[group, startchat]"   v-for="(group, index) in grouplists">
			    <div class="aui-media-list-item-inner">
			        <div class="aui-list-item-media wechat-avatar"><img
			                    v-image-resize="{src:group.portrait?group.portrait:'../res/qun.jpg'}"/></div>
			        <div class="aui-list-item-inner">
			            <div class="aui-list-item-text">
			                <div class="aui-list-item-title">{{group.name}}</div>
			            </div>
			            <!-- <div class="aui-list-item-text aui-font-size-12">[91人] 厕所上身上</div> -->
			        </div>
			    </div>
			</li>
			</ul>
		</div>
	</div>
		<!-- <div class="spinner">
			<div class="bounce1"></div>
			<div class="bounce2"></div>
			<div class="bounce3"></div>
		</div> -->
	<!-- </div> -->
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
  <script type="text/javascript" src="../../script/aui-dialog.js" ></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/url.js"></script>


	<script type="text/javascript">
	  var memberlists;
		var grouplists;
		apiready = function() {
			// join_group();
			$api.fixStatusBar($api.dom('.aui-bar-nav'));
			$api.css($api.dom("#friends"), 'display:block');
			showProgress();
			var data = {
					member_id: getPrefs('member_id'),
			};
			var callback = function (ret) {
					contents = ret.content;
					memberlists = contents.friends;
					grouplists = contents.clans;

					console.log(JSON.stringify(contents));
					initApp();
					api.parseTapmode();
			};
			addEventListener();
			pinet.post(URL.getClansAndFriends, data, callback);

		}

		function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                memberlists:memberlists,
								grouplists:grouplists
            },
            computed: {
            },
            methods: {
              startchat:function(group){
								api.openWin({
									reload : true,
									name : 'win_group',
									url : '../win/win_group.html',
									vScrollBarEnabled : false,
									pageParam : {
										group_id : group.clan_id,
										group_tx : group.portrait,
										group_zh : group.name
									}
								});

              },
							startchatone:function(member){
								api.openWin({
									reload : true,
									name : 'chat',
									url : '../win/win_friend_info.html',
									vScrollBarEnabled : false,
									pageParam : {
										uid : member.member_id,
									}
								});
							}
            }

        });
    }
		var tab = new auiTab({
			element : document.getElementById("tab"),
		}, function(ret) {
			if (ret.index == 1) {
				$api.css($api.dom(".friends"), 'display:block');
				$api.css($api.dom('.groups'), 'display: none');
			} else if (ret.index == 2) {
				$api.css($api.dom(".groups"), 'display:block');
				$api.css($api.dom('.friends'), 'display: none');
			} else if (ret.index == 3) {
				$api.css($api.dom(".groups"), 'display:block');
				$api.css($api.dom('.friends'), 'display: none');
			}
		});
		function li(id, zh, tx) {
			api.openWin({
				reload : true,
				name : 'chat',
				url : '../win/win_chat.html',
				vScrollBarEnabled : false,
				pageParam : {
					id : id,
					zh : zh,
					tx : tx
				}
			});
		}


		function group(id, zh, tx) {
			api.openWin({
				reload : true,
				name : 'win_group',
				url : '../win/win_group.html',
				vScrollBarEnabled : false,
				pageParam : {
					group_id : id,
					group_zh : zh,
					group_tx : tx
				}
			});
		}

		function join(group_id, group_tx, group_zh) {
			console.log(group_id);
			console.log(group_tx);

			console.log(group_zh);
			return;

			var dialog = new auiDialog({});
			var rong = api.require('rongCloud2');
			var model = api.require('model');
			api.openWin({
				reload : true,
				name : 'win_group',
				url : '../win/win_group.html',
				vScrollBarEnabled : false,
				pageParam : {
					group_id : group_id,
					group_tx : group_tx,
					group_zh : group_zh
				}
			});
		}
		function join_group(user_id, group_id, group_nc) {
			var appKey = "pkfcgjstpwii8";
			var appSecret = "HCnCOqS4CiLH";
			var nonce = Math.floor(Math.random() * 1000000);
			var timestamp = Date.now();
			var signature = sha1("" + appSecret + nonce + timestamp);
			api.ajax({
				url : "http://api.cn.ronghub.com/group/join.json",
				method : "post",
				headers : {
					"RC-App-Key" : appKey,
					"RC-Nonce" : "" + nonce,
					"RC-Timestamp" : "" + timestamp,
					"RC-Signature" : "" + signature,
					"Content-Type" : "application/x-www-form-urlencoded"
				},
				data : {
					values : {
						userId : 'ylvuwzraMID6', //要加入群的用户 Id，可提交多个，最多不超过 1000 个。（必传）
						groupId : '8', //要加入的群 Id。（必传）
						groupName : '看看咯我问一下'//要加入的群 Id 对应的名称。（必传）
					}
				}
			}, function(ret, err) {
				console.log(JSON.stringify(ret));
				console.log(JSON.stringify(err));

				if (ret.code == 200) {
					api.toast({
						msg : '成功加入该群',
					});
				}
			});
		}
		function addEventListener(){
			api.addEventListener({
				name : 'ok'
			}, function(ret, err) {
				group_list();
			});
		}
	</script>
</html>
